<template>
  <div class="content-sides">
    <div class="content-side content-side-left">
      <div class="main-title-wrapper">
        <div class="main-subtitle">{{ subtitle }}</div>
        <div class="main-title">{{ title }}</div>
      </div>
        <NextButton v-if="showNextButton" @click="$emit('next')" />
      </div>
      
    <div class="content-side content-side-right">
      <div class="partners-blocks">
        <PartnerCard
          v-for="partner in partners"
          :key="partner.id"
          :name="partner.name"
          :logo="partner.logo"
          :description="partner.description"
          :website="partner.website"
      />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PartnerCard from './PartnerCard.vue';
import NextButton from './NextButton.vue';

interface Partner {
  id: string;
  name: string;
  logo: string;
  description: string;
  website?: string;
}

defineProps<{
  subtitle: string;
  title: string;
  showNextButton?: boolean;
}>();

defineEmits<{
  (e: 'next'): void;
}>();

// 合作伙伴数据 - 使用实际复制的logo
const partners: Partner[] = [
  {
    id: '1',
    name: 'TetraPak',
    logo: '/src/assets/images/partners/p1.png',
    description: '公司TetraPak - 世界领先的各种食品加工和包装设备制造商。',
    website: 'https://www.tetrapak.com'
  },
  {
    id: '2',
    name: 'ALFA LAVAL',
    logo: '/src/assets/images/partners/p2.png',
    description: 'ALFA LAVAL公司是三个关键技术领域的全球领导者：换热、分离和流体处理设备。',
    website: 'https://www.alfalaval.com'
  },
  {
    id: '3',
    name: 'MARBO',
    logo: '/src/assets/images/partners/p3.png',
    description: 'MARBO公司 - 为传统乳制品生产提供全面的创新解决方案。',
    website: ''
  },
  {
    id: '4',
    name: 'A-LIMA-BIS',
    logo: '/src/assets/images/partners/p4.png',
    description: 'A-LIMA-BIS公司 - 是领先的欧洲公司，提供使用膜技术的综合技术解决方案。',
    website: 'http://www.alimabis.com.pl'
  },
  {
    id: '5',
    name: 'GEO-ENGINEERING',
    logo: '/src/assets/images/partners/logo.jpg',
    description: 'GEO-ENGINEERING是食品设备设计和生产领域若干大型国际机械制造工厂的官方经销商和服务中心。',
    website: 'https://geo-eng.ru'
  },
  {
    id: '6',
    name: 'MLEKOMAT',
    logo: '/src/assets/images/partners/p6.png',
    description: '',
    website: 'http://www.mlekomat.com.pl'
  }
];
</script>

<style scoped>
.content-sides {
  width: 100%;
  max-width: 150rem; /* 与screen_content一致 */
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between;
  gap: 4rem;
  animation: fadeIn 0.8s ease-out;
}

.content-side-left {
  width: 40%; /* 与原网站一致 */
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

.main-title-wrapper {
  margin-bottom: 7rem; /* 与原网站一致 */
}

.main-subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main-title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.content-side-right {
  width: 60%; /* 与原网站一致 */
}

.partners-blocks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 使用原网站的flexbox布局 */
}

/* 响应式 */
@media (max-width: 1024px) {
  .content-sides {
  padding: 0 2rem;
    gap: 3rem;
}

  .main-title {
    font-size: 6rem;
  }
  
  .partners-blocks {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .content-sides {
    flex-direction: column;
    padding: 2rem 1.5rem;
}

  .content-side-left {
    width: 100%;
    padding-right: 0;
    margin-bottom: 4rem;
}

  .content-side-right {
    width: 100%;
  }
  
  .main-title {
    font-size: 5rem;
  }
  
  .main-title-wrapper {
    margin-bottom: 3rem;
}

  .partners-blocks {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 3.4rem;
  }
}
</style>